<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>search</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!--<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>-->
    <style>
        #search{
            background: red;
        }
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none
        }
        html, body{
            width: 100%;
            height: 100%;
        }
        .cover{
            width: 100% ;
            text-align: center;
        }
        #btn{
            border: 1px solid #00b600;
            padding: .4rem;
            border-radius: 5px;
            margin-top: 1.5rem;
            background: #fff;
            color: #00b600;
            font-size: 1rem;
            font-weight: 700;
        }
        .list{
            box-sizing: border-box;
            padding: 1rem .5rem;
            width: 100%;
            overflow: hidden;
        }
        .list>.item {
            width: 33.3333%;
            height: 10rem;
            box-sizing: border-box;
            padding: .5rem .2rem;
            float: left;
        }

        .list>.item>a{
            display: block;
            width: 100%;
            height: 100%;
        }

        .list>.item>a>.cover{
            width: 100%;
            height: 7rem;
        }
        .list>.item>a>.cover>img{
            display: block;
            width: 100%;
            height: 6.5rem;
        }
        .list>.item>a>.info>h3{
            text-align: center;
            font-size: .6rem;
            color: #494949;
        }
        .list>.item>a>.info>.rank{
            text-align: center;
            font-size: .6rem;
            color: #9b9b9b;
        }
        .page{
            box-sizing: border-box;
            padding: 1rem .5rem;
            width: 100%;
        }
        .page>.info{
            width: 100%;
            height: 7.6rem;
        }
        .page>.info>.right{
            float: right;
            width: 35%;
        }
        .page>.info>.right>a{
            display: block;
            width: 100%;
        }
        .page>.info>.right>a>img{
            display: block;
            width: 100%;
            height: 7.6rem
        }
        .page>.info>.left{
            float: left;
            width: 56%;
        }
        .page>.info>.left>p{
            font-size: .7rem;
            color: #494949;
        }
        .page>.info>.left>.rating{
            margin: .2rem 0 .8rem 0;
        }
        .page>.info>.left>.meta{
            font-size: .6rem;
            line-height: 1.1rem;
        }
        .page>.info>.left>.rating>span{
            color: lightgreen;
            margin: .2rem 0 .8rem 0;
        }
        .page>.info>.left>.rating>.ratingNum{
            margin-left: .5rem;
            color: #aaa;
        }
    </style>
</head>
<body>
    <h1 id="search">开始录音2</h1>
    <h1 id="shareqq">分享QQ3</h1>
    <div class="timestamp">timestamp:<%= timestamp %></div>
    <div class="noncestr">noncestr:<%= noncestr %></div>
    <div class="signature">signature:<%= signature %></div>
    <div>搜索结果</div>
    <div class="result">none</div>
    <ul class="list">
        <!--<li class="item">
            <a href="javascript:;">
                <div class="cover">
                    <img src="http://py4fl8ys7.bkt.clouddn.com/J8Md1Z3KpK.jpg" alt="">
                </div>
                <div class="info">
                    <h3>肖申克的救赎</h3>
                    <p class="rank">
                        <span>评分:</span>
                        <span class="rating">9.6</span>
                    </p>
                </div>
            </a>
        </li>-->
    </ul>
    <script>
        $(function () {
        /*
        1、配置js安全域名接口
        2、http://res.wx.qq.com/open/js/jweixin-1.4.0.js
        3、通过config接口注入权限验证配置
         */
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: 'wxd335c2c3f43d7194', // 必填，公众号的唯一标识
            timestamp:'<%= timestamp %>', // 必填，生成签名的时间戳  这里<%%>是ejs的模板引擎 但是必须加上 ‘’ ，要不然这里就不会ejs解析，加上‘’后变成字符串 ejs就会解析
            nonceStr: '<%= noncestr %>', // 必填，生成签名的随机串
            signature: '<%= signature %>',// 必填，签名
            jsApiList: [
                'onMenuShareTimeline',//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
                'onMenuShareQQ',
                'onMenuShareQZone',
                'startRecord',  //开始录音
                'stopRecord', //结束录音
                'translateVoice', //翻译语音
                'updateAppMessageShareData'
            ] // 必填，需要使用的JS接口列表
        });

        //当你的 config成功后 会触发 read ，失败触发error,所以你是用微信的那些接口，都放在read里面
        wx.ready(function(){
            console.log('jsapi 认证成功')
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
            // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
            // 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

            // 判断当前客户端版本是否支持指定JS接口 测试的时候使用。
            /*wx.checkJsApi({
                jsApiList: ['onMenuShareTimeline',//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
                    'onMenuShareQQ',
                    'onMenuShareQZone',
                    'startRecord',  //开始录音
                    'stopRecord', //结束录音
                    'translateVoice',], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function(res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    console.log(res)
                }
            });*/

            /*
            语音识别功能
             */
            //设置标志位 ，是否录音中
            let isRecord=false;
            //tap 就是点击事件
            //langtap 只能三秒
            $('#search').on('click',function () {
                // ************** 测试 post 请求  ****************
                /* let url='<%= url %>/api/getyuyinList';
                 $.ajax({
                     type: "POST",
                     url:url,
                     dataType: "json",
                     data:{
                         name:'罗小黑战记'
                     },
                     success:function (res) {
                         console.log(res);
                     },
                     error:function (res) {
                         console.log(res);
                     }
                 })*/

                // ************** 测试 get 请求  ****************
                let url='<%= url %>/api/getyuyinList/罗小黑战记';
                $.ajax({
                    url:url,
                    type:'GET',
                    success:function (res) {
                        console.log(res);
                        let html='';
                        let {title,doubanID,image,summary,posterKey}=res[0];
                        html+=`<li class="item">
                                     <a href="javascript:;">
                                         <div class="cover">
                                             <img src="http://py4fl8ys7.bkt.clouddn.com/${posterKey}" alt="">
                                         </div>
                                         <div class="info">
                                             <h3>${title}</h3>
                                             <p class="rank">
                                                 <span>豆瓣ID:</span>
                                                 <span class="rating">${doubanID}</span>
                                             </p>
                                             <p class="rank">
                                                 <span>简介:</span>
                                                 <span class="rating">${summary}</span>
                                             </p>
                                         </div>
                                     </a>
                                 </li>`;
                         $('.list').html(html);
                    },
                    error:function (res) {
                        console.log(res);
                    }

                })
                var that=this;
                // console.log('click search btn')
                if(!isRecord){
                    //开始录音
                    wx.startRecord()
                    isRecord=true;
                    $(that).html('停止录音')
                }else{
                    // 结束录音
                    wx.stopRecord({
                        // 结束录音，会把语音上传到微信服务器，微信服务器给你一个id，根据这个id找到文件
                        success:function (res){
                            console.log('stopRecord');
                            var localId=res.localId
                            //识别语音
                            // 现在语音识别，需要权限开启，暂时没法用
                            wx.translateVoice({
                                localId, // 需要识别的音频的本地Id，由录音相关接口获得
                                isShowProgressTips: 1, // 默认为1，显示进度提示
                                success: function (res) {
                                    isRecord=false;
                                    $(that).html('开始录音');

                                    console.log(res.translateResult); // 语音识别的结果
                                    /*  const url='https://api.douban.com/v2/movie/search?callback=?&q='+res.translateResult;
                                    $.getJSON(url,function (data) {
                                         console.log(data)
                                         if(data.subjects&& data.subjects.length){
                                             // 显示页面数据
                                             let html='';
                                             data.forEach(item=>{
                                                 html+=`<li class="item">
                                                             <a href="javascript:;">
                                                                 <div class="cover">
                                                                     <img src="${item.images.small}" alt="">
                                                                 </div>
                                                                 <div class="info">
                                                                     <h3>${item.title}</h3>
                                                                     <p class="rank">
                                                                         <span>评分:</span>
                                                                         <span class="rating">${item.rating.average}</span>
                                                                     </p>
                                                                 </div>
                                                             </a>
                                                         </li>`;
                                             })
                                              $('.list').html(html);
                                            }else{
                                                alert('暂时揭秘有相关的电影信息')
                                            })
                                        }*/
                                    let url='<%= url %>/api/getyuyinList?name=罗小黑战记';
                                    console.log('进入了translateVoice'+url);
                                        $.ajax({
                                            url:url,
                                            methods:'GET',
                                            // contentType: "application/json",
                                            /*data:{
                                                name:res.translateResult
                                            },*/
                                            success:function (res) {
                                                console.log(res);
                                                $('.list').html(res);
                                            },
                                            error:function (res) {
                                                console.log(res);
                                            }

                                        })

                                    /*
                                     分享接口
                                     */
                                    wx.onMenuShareQQ({
                                        title: data.subjects[0].title, // 分享标题
                                        desc: `评分为：${data.subjects[0].rating.average}`, // 分享描述
                                        link: data.subjectsp[0].alt, // 分享链接
                                        imgUrl: data.subjectsp[0].images.small, // 分享图标
                                        success: function () {
                                            // 用户确认分享后执行的回调函数
                                            alert('分享成功')
                                        },
                                        cancel: function () {
                                            // 用户取消分享后执行的回调函数
                                            alert('分享失败')
                                        }
                                    });
                                }
                            });
                        }
                    })
                }
            })



        });
            // 验证失败，可以返回404 或者错误信息
            wx.error(function(res){
                console.log('jsapi 认证失败')
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            });
        })
    </script>
</body>
</html>